<template>
    <view v-if="order">
    <view class="order-item">
        <view class="header">
            <text class="store">小厨房{{ title }}</text>
            <!-- <text class="status" :style="{ color: statusColor }">{{ statusRemark }}</text> -->
        </view>
    </view>
    <view class="content">
        <image v-for="(item, index) in order.items?.slice(0, 3)" :key="index" src="../static/毛血旺.jpg" class="product-image"
            mode="aspectFill" />
        <view class="price-section">
            <text class="total">￥{{ order.status }}</text>
            <text class="count">共{{ order.id }}件商品</text>
        </view>
    </view>
    <view class="footer">
        <text class="order-no">订单号：{{ order.createdAt }}</text>
        <text class="actions">
            <button class="btn cancel" v-if="order.status === 'pending'"
                @click="$emit('cancel', order.id)">取消订单</button>
            <button v-if="order.status === 'ready'" class="btn confirm">
                确认取餐
            </button>

        </text>
    </view>
</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

const statusMap = reactive({
    1: { text: '制作中', color: '#00a862' },
    2: { text: '已完成', color: '#888' },
    3: { text: '已取消', color: '#999' }
})

const props = defineProps({
    order: {
        type: Object,
        required: true
    }
})

onMounted(()=> {
    console.log('props===订单数据:', props.order)
})

// const statusRemark = computed(() => {statusMap[props.order.status].remark})
// const statusColor = computed(() => {statusMap[props.order.status].color})
</script>

<style lang="scss" scoped>
.order-item {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #eee;
    }

    .product-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
    }

    .btn {
        font-size: 28rpx;
        padding: 8rpx 24rpx;
        border-radius: 40rpx;
        margin-left: 20rpx;

        &.cancel {
            border: 1rpx solid #999;
            color: #666;
        }

        &.confirm {
            background: #00a862;
            color: white;
        }
    }
}
</style>